//编辑，详情动态表格
<template>
  <el-dialog
    v-el-drag-dialog="{resize: resizeTable, updataFull}"
    :fullscreen="isfullscreen"
    :width="setDialogWidth('1000px')"
    :visible="visible"
    :title="$t('LINK_SEGMENT_DETAILS')"
    class="segment-detail"
    @open="open"
    @close="close"
  >
    <el-radio-group v-model="viewType">
      <el-radio-button label="list">{{ $t('LIST') }}</el-radio-button>
      <el-radio-button label="view">{{ $t('GRAPHICS') }}</el-radio-button>
    </el-radio-group>
    <div v-if="viewType === 'list'" class="segment-list-box flex-1 flex-column">
      <div class="mb-10">
        <span class="title-label">{{ $t('LINK_SEGMENT_NAME') }}:</span>
        {{ formData.segmentName }}
      </div>
      <div class="flex mb-10">
        <div
          v-for="i in portStatusList"
          :key="i.value"
          class="port-status-list mr-10"
          :class="'color-' + i.value.toLowerCase()"
        >
          {{ i.label }}
        </div>
      </div>
      <el-table
        v-if="tableHead.length"
        ref="tableBox"
        border
        :data="segmentList"
        style="width: 100%"
        height="100%"
        size="mini"
        :cell-class-name="cellStyle"
      >
        <template slot="empty">
          <NullData />
        </template>
        <el-table-column
          type="index"
          :label="$t('SEQUENCE')"
          fixed="left"
          :width="resetSize(60)"
          align="center"
        />
        <div v-for="(item, index) in tableHead" :key="index">
          <el-table-column
            :label="item.segmentName"
            align="center"
            show-overflow-tooltip
          >
            <el-table-column
              :label="item.startNode ? item.startNode.nodeName : '--'"
              align="center"
              :prop="`segmentList${index}.startPort.bizName`"
              :render-header="tableRenderHeader"
              show-overflow-tooltip
              :type="index !== 0 ? 'display' : ''"
              min-width="110"
            >
              <template v-slot="scope">
                {{ scope.row[`segmentList${index}`].startPort.bizName }}
              </template>
            </el-table-column>
            <el-table-column
              v-if="item.cable"
              :label="item.cable ? item.cable.cableName : '--'"
              :prop="`segmentList${index}.fiber.fiberName`"
              :render-header="tableRenderHeader"
              align="center"
              min-width="110"
              show-overflow-tooltip
            />
            <el-table-column
              :label="item.endNode ? item.endNode.nodeName : '--'"
              align="center"
              :prop="`segmentList${index}.endPort.bizName`"
              :render-header="tableRenderHeader"
              show-overflow-tooltip
              :type="index !== tableHead.length - 1 ? 'canSpan' : ''"
              min-width="110"
            >
              <template v-slot="scope">
                {{ scope.row[`segmentList${index}`].endPort.bizName }}
              </template>
            </el-table-column>
          </el-table-column>
        </div>
      </el-table>
    </div>
    <route-graphical
      v-if="viewType === 'view'"
      :segment-list="formData.networkSegmentList"
      :channel-count="segmentList.length"
    />
    <template v-slot:footer>
      <el-button @click="close">{{ $t('CLOSE') }}</el-button>
    </template>
  </el-dialog>
</template>
<script>
  import { mapGetters } from 'vuex'
  import LogicSegmentApi from '@/api/oen/LogicSegmentApi'
  import { tableRenderHeader } from '@/utils/common'
  import RouteGraphical from './RouteGraphical'

  export default {
    name: 'SegmentDetail',
    components: {
      RouteGraphical
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      rowData: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        viewType: 'list',
        segmentList: [],
        formData: {
          startNode: {},
          endNode: {},
          segmentList: []
        }
      }
    },
    computed: {
      ...mapGetters(['dictList']),
      tableHead() {
        return this.formData.networkSegmentList || []
      },
      portStatusList() {
        return this.dictList.PORT_STATUS.filter((i) => i.value !== 'LOCK' && i.value !== 'CONN')
      }
    },
    methods: {
      tableRenderHeader(h, data) {
        return tableRenderHeader(h, data)
      },
      resizeTable() {
        this.$nextTick(() => {
          this.$refs.tableBox && this.$refs.tableBox.doLayout()
        })
      },
      open() {
        this.viewType = 'list'
        this.segmentList = []
        this.formData = this.rowData
        this.getSegmentList()
      },
      // 查询通道列表
      getSegmentList() {
        console.log('this.formData', this.formData)
        LogicSegmentApi
          .detail({
            segmentId: this.formData.segmentId
          })
          .then(res => {
            this.segmentList = res || []
            this.segmentList.forEach(i => {
              i.segmentList.forEach((j, index) => {
                j.startPort = j.startPort || {}
                j.startPort.bizName = this.$utils.handleServiceI18n(
                  j.startPort.bizName
                )
                j.endPort = j.endPort || {}
                j.endPort.bizName = this.$utils.handleServiceI18n(
                  j.endPort.bizName
                )
                i['segmentList' + index] = j
              })
            })
            this.segmentList.sort((a, b) => {
              return a.segmentList0.startPort.bizName.localeCompare(
                b.segmentList0.startPort.bizName,
                'zh-Hans-CN',
                { sensitivity: 'accent', numeric: true }
              )
            })
            console.log('segmentList', this.segmentList)

            this.$nextTick(() => {
              this.$refs.tableBox && this.$refs.tableBox.doLayout()
            })
          })
      },
      // 根据节点状态跟网格颜色
      cellStyle({ row, column }) {
        if (column.property) {
          const keys = column.property.split('.')
          return 'color-' + (row[keys[0]][keys[1]].status || '').toLowerCase()
        }
      },
      close() {
        this.$emit('close')
      }
    }
  }
</script>
<style lang="scss">

  .segment-detail .el-dialog__body {
    display: flex;
    flex-direction: column;
    min-height: 400px;
  }
</style>
